<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>湘西旅游 - 个人中心</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#1A4D2E',      // 湘西靛蓝 - 主色调
            secondary: '#E63946',    // 朱砂红 - 强调色
            accent: '#FFB703',       // 金色 - 点缀色
            neutral: '#F1FAEE',      // 米色 - 背景色
            dark: '#1D3557',         // 深色 - 文本
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            display: ['"Ma Shan Zheng"', 'cursive'],
          },
        },
      }
    }
  </script>

  <!-- 引入中文字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }
      .card-shadow {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }
      .bg-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%231a4d2e' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
      }
      .border-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%23e63946' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
      }
    }
  </style>
</head>

<body class="bg-neutral bg-pattern min-h-screen text-dark">
  <!-- 编辑个人资料弹窗 -->
  <div id="editProfileModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-md mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modalContent">
      <div class="p-6 border-b border-gray-100 flex justify-between items-center">
        <h3 class="text-xl font-bold">编辑个人资料</h3>
        <button id="closeModal" class="text-gray-500 hover:text-gray-700 transition-colors">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <div class="p-6">
        <form id="profileForm">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
            <input type="text" value="湘西旅行者" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
          </div>

          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">个人简介</label>
            <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">喜欢徒步旅行，探索湘西的神秘山水与民族文化</textarea>
          </div>

          <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-1">上传新头像</label>
            <div class="flex items-center">
              <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
                <img src="https://picsum.photos/id/64/200/200" alt="当前头像" class="w-full h-full object-cover">
              </div>
              <label class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm transition-colors cursor-pointer">
                <i class="fa fa-upload mr-1"></i> 选择图片
                <input type="file" class="hidden">
              </label>
            </div>
          </div>

          <div class="flex space-x-3">
            <button type="button" id="cancelEdit" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 rounded-lg transition-colors">
              取消
            </button>
            <button type="submit" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 rounded-lg transition-colors">
              保存修改
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 成功提示弹窗 -->
  <div id="successToast" class="fixed bottom-6 right-6 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center">
    <i class="fa fa-check-circle mr-2"></i>
    <span id="toastMessage">操作成功</span>
  </div>

  <!-- 评论编辑弹窗 -->
  <div id="editCommentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg mx-4 transform transition-all duration-300 scale-95 opacity-0" id="commentModalContent">
      <div class="p-6 border-b border-gray-100 flex justify-between items-center">
        <h3 class="text-xl font-bold">编辑评论</h3>
        <button id="closeCommentModal" class="text-gray-500 hover:text-gray-700 transition-colors">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <div class="p-6">
        <form id="commentForm">
          <input type="hidden" id="commentId" value="">

          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">评分</label>
            <div class="flex text-2xl text-gray-300" id="ratingStars">
              <i class="fa fa-star cursor-pointer hover:text-accent transition-colors" data-rating="1"></i>
              <i class="fa fa-star cursor-pointer hover:text-accent transition-colors" data-rating="2"></i>
              <i class="fa fa-star cursor-pointer hover:text-accent transition-colors" data-rating="3"></i>
              <i class="fa fa-star cursor-pointer hover:text-accent transition-colors" data-rating="4"></i>
              <i class="fa fa-star cursor-pointer hover:text-accent transition-colors" data-rating="5"></i>
            </div>
          </div>

          <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-1">评论内容</label>
            <textarea rows="5" id="commentContent" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"></textarea>
          </div>

          <div class="flex space-x-3">
            <button type="button" id="cancelComment" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 rounded-lg transition-colors">
              取消
            </button>
            <button type="submit" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 rounded-lg transition-colors">
              保存修改
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 攻略编辑弹窗 -->
  <div id="editNoteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl mx-4 transform transition-all duration-300 scale-95 opacity-0" id="noteModalContent">
      <div class="p-6 border-b border-gray-100 flex justify-between items-center">
        <h3 class="text-xl font-bold" id="noteModalTitle">发布攻略笔记</h3>
        <button id="closeNoteModal" class="text-gray-500 hover:text-gray-700 transition-colors">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <div class="p-6">
        <form id="noteForm">
          <input type="hidden" id="noteId" value="">

          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">标题</label>
            <input type="text" id="noteTitle" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="输入攻略标题">
          </div>

          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">相关景点</label>
            <select id="noteLocation" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
              <option value="">选择相关景点</option>
              <option value="fenghuang">凤凰古城</option>
              <option value="zhangjiajie">张家界国家森林公园</option>
              <option value="furong">芙蓉镇</option>
              <option value="dehang">德夯苗寨</option>
              <option value="tianmen">天门山</option>
            </select>
          </div>

          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">攻略内容</label>
            <textarea rows="8" id="noteContent" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="分享您的旅行体验和攻略..."></textarea>
          </div>

          <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-1">上传图片（可选）</label>
            <div class="flex flex-wrap gap-3">
              <div class="w-20 h-20 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center text-gray-400 hover:border-primary transition-colors cursor-pointer">
                <i class="fa fa-plus text-xl"></i>
              </div>
            </div>
          </div>

          <div class="flex space-x-3">
            <button type="button" id="cancelNote" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 rounded-lg transition-colors">
              取消
            </button>
            <button type="submit" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 rounded-lg transition-colors">
              发布
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <main class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <div class="text-center mb-10 relative overflow-hidden rounded-lg">
      <div class="absolute inset-0 bg-cover bg-center opacity-20" style="background-image: url('https://picsum.photos/id/1036/1200/300');"></div>
      <h2 class="text-[clamp(1.8rem,5vw,2.8rem)] font-display text-primary relative z-10 py-8">我的湘西之旅</h2>
      <div class="h-1 w-32 bg-secondary mx-auto relative z-10"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
      <!-- 左侧：用户信息 -->
      <div class="lg:col-span-1">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform duration-300 hover:shadow-xl">
          <!-- 用户信息头部 -->
          <div class="h-36 bg-primary relative">
            <div class="absolute inset-0 opacity-20 bg-cover bg-center" style="background-image: url('https://picsum.photos/id/1039/600/400');"></div>
            <!-- 头像 -->
            <div class="absolute -bottom-16 left-8">
              <div class="w-32 h-32 rounded-full border-4 border-white overflow-hidden shadow-lg">
                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-full h-full object-cover">
              </div>
            </div>
            <!-- 会员标识 -->
            <div class="absolute top-4 right-4 bg-accent text-primary text-xs font-bold px-3 py-1 rounded-full">
              湘西探索者 Lv.3
            </div>
          </div>

          <!-- 用户信息内容 -->
          <div class="pt-20 pb-6 px-6">
            <div class="text-center mb-4">
              <h3 class="text-xl font-bold">湘西旅行者</h3>
              <p class="text-gray-500 text-sm mt-1">已探索 8 个湘西景点</p>
            </div>

            <p class="text-gray-600 text-sm mb-6 text-center">
              喜欢徒步旅行，探索湘西的神秘山水与民族文化
            </p>

            <!-- 数据统计 -->
            <div class="grid grid-cols-3 gap-2 text-center">
              <div class="p-3">
                <div class="text-primary font-bold text-xl">5</div>
                <div class="text-gray-500 text-xs">评论</div>
              </div>
              <div class="p-3">
                <div class="text-primary font-bold text-xl">3</div>
                <div class="text-gray-500 text-xs">攻略</div>
              </div>
              <div class="p-3">
                <div class="text-primary font-bold text-xl">238</div>
                <div class="text-gray-500 text-xs">获赞</div>
              </div>
            </div>

            <button id="editProfileBtn" class="w-full mt-6 bg-primary hover:bg-primary/90 text-white py-2 rounded-lg transition-colors duration-300 flex items-center justify-center">
              <i class="fa fa-pencil mr-2"></i> 编辑个人资料
            </button>
          </div>
        </div>

        <!-- 我的成就 -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden mt-6 p-6">
          <h3 class="text-lg font-bold mb-4 flex items-center">
            <i class="fa fa-trophy text-accent mr-2"></i> 我的成就
          </h3>

          <div class="space-y-4">
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                <i class="fa fa-comment"></i>
              </div>
              <div class="ml-3">
                <div class="font-medium">评论达人</div>
                <div class="text-xs text-gray-500">发布5条景点评论</div>
              </div>
              <div class="ml-auto text-accent">
                <i class="fa fa-check-circle"></i>
              </div>
            </div>

            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                <i class="fa fa-pencil"></i>
              </div>
              <div class="ml-3">
                <div class="font-medium">攻略作者</div>
                <div class="text-xs text-gray-500">发布3篇旅游攻略</div>
              </div>
              <div class="ml-auto text-accent">
                <i class="fa fa-check-circle"></i>
              </div>
            </div>

            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-400">
                <i class="fa fa-star"></i>
              </div>
              <div class="ml-3">
                <div class="font-medium">人气攻略</div>
                <div class="text-xs text-gray-500">单篇攻略获赞100+</div>
              </div>
              <div class="ml-auto text-gray-400">
                <i class="fa fa-lock"></i>
              </div>
            </div>

            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-400">
                <i class="fa fa-users"></i>
              </div>
              <div class="ml-3">
                <div class="font-medium">旅行导师</div>
                <div class="text-xs text-gray-500">帮助10位旅行者</div>
              </div>
              <div class="ml-auto text-gray-400">
                <i class="fa fa-lock"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：主要内容区 -->
      <div class="lg:col-span-3 space-y-8">
        <!-- 我的评论 -->
        <section class="bg-white rounded-xl shadow-lg overflow-hidden">
          <div class="border-b border-gray-100 px-6 py-4 flex justify-between items-center">
            <h3 class="text-xl font-bold flex items-center">
              <i class="fa fa-comment text-primary mr-2"></i> 我的评论
            </h3>
            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium transition-colors">
              查看全部 <i class="fa fa-angle-right ml-1"></i>
            </a>
          </div>

          <div class="p-6">
            <!-- 评论1 -->
            <div class="border-b border-gray-100 pb-6 mb-6">
              <div class="flex">
                <div class="w-1/5 md:w-1/6 mb-4 md:mb-0">
                  <img src="https://picsum.photos/id/1037/300/300" alt="凤凰古城" class="w-full h-24 object-cover rounded-lg">
                </div>
                <div class="w-4/5 md:w-5/6 md:pl-6">
                  <div class="flex justify-between">
                    <h4 class="font-bold">凤凰古城</h4>
                    <div class="flex text-yellow-400">
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star-half-o"></i>
                    </div>
                  </div>
                  <p class="text-sm text-gray-500 mb-2">评论于 2023年10月12日</p>
                  <p class="text-gray-700 text-sm mb-4">古城夜景非常美丽，沱江边的吊脚楼在灯光下别有一番韵味。建议住在江边客栈，可以欣赏到最美的景色。早上人少的时候拍照最适合，避开旅游团高峰。</p>
                  <div class="flex items-center text-sm text-gray-500 mb-3">
                    <span class="flex items-center mr-4">
                      <i class="fa fa-thumbs-up text-primary mr-1"></i> 42
                    </span>
                    <span class="flex items-center mr-4">
                      <i class="fa fa-comment-o mr-1"></i> 8 条回复
                    </span>
                  </div>
                  <div class="flex space-x-2 justify-end">
                    <button class="text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded transition-colors edit-comment-btn" data-id="1" data-rating="4.5" data-content="古城夜景非常美丽，沱江边的吊脚楼在灯光下别有一番韵味。建议住在江边客栈，可以欣赏到最美的景色。早上人少的时候拍照最适合，避开旅游团高峰。">
                      <i class="fa fa-edit mr-1"></i> 编辑
                    </button>
                    <button class="text-xs px-3 py-1 bg-red-100 hover:bg-red-200 text-red-600 rounded transition-colors delete-comment-btn" data-id="1">
                      <i class="fa fa-trash mr-1"></i> 删除
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 评论2 -->
            <div class="border-b border-gray-100 pb-6 mb-6">
              <div class="flex">
                <div class="w-1/5 md:w-1/6 mb-4 md:mb-0">
                  <img src="https://picsum.photos/id/1038/300/300" alt="张家界国家森林公园" class="w-full h-24 object-cover rounded-lg">
                </div>
                <div class="w-4/5 md:w-5/6 md:pl-6">
                  <div class="flex justify-between">
                    <h4 class="font-bold">张家界国家森林公园</h4>
                    <div class="flex text-yellow-400">
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                    </div>
                  </div>
                  <p class="text-sm text-gray-500 mb-2">评论于 2023年10月8日</p>
                  <p class="text-gray-700 text-sm mb-4">大自然的奇迹！山峰如刀削斧凿，云雾缭绕时宛如仙境。建议安排两天时间游览，一定要去袁家界和天子山。体力不好的朋友可以多乘坐索道和观光车，节省体力欣赏美景。</p>
                  <div class="flex items-center text-sm text-gray-500 mb-3">
                    <span class="flex items-center mr-4">
                      <i class="fa fa-thumbs-up text-primary mr-1"></i> 89
                    </span>
                    <span class="flex items-center mr-4">
                      <i class="fa fa-comment-o mr-1"></i> 15 条回复
                    </span>
                  </div>
                  <div class="flex space-x-2 justify-end">
                    <button class="text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded transition-colors edit-comment-btn" data-id="2" data-rating="5" data-content="大自然的奇迹！山峰如刀削斧凿，云雾缭绕时宛如仙境。建议安排两天时间游览，一定要去袁家界和天子山。体力不好的朋友可以多乘坐索道和观光车，节省体力欣赏美景。">
                      <i class="fa fa-edit mr-1"></i> 编辑
                    </button>
                    <button class="text-xs px-3 py-1 bg-red-100 hover:bg-red-200 text-red-600 rounded transition-colors delete-comment-btn" data-id="2">
                      <i class="fa fa-trash mr-1"></i> 删除
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 评论3 -->
            <div>
              <div class="flex">
                <div class="w-1/5 md:w-1/6 mb-4 md:mb-0">
                  <img src="https://picsum.photos/id/1080/300/300" alt="芙蓉镇" class="w-full h-24 object-cover rounded-lg">
                </div>
                <div class="w-4/5 md:w-5/6 md:pl-6">
                  <div class="flex justify-between">
                    <h4 class="font-bold">芙蓉镇</h4>
                    <div class="flex text-yellow-400">
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star-o"></i>
                    </div>
                  </div>
                  <p class="text-sm text-gray-500 mb-2">评论于 2023年9月25日</p>
                  <p class="text-gray-700 text-sm mb-4">挂在瀑布上的千年古镇，非常有特色。晚上灯光亮起时，瀑布和古镇交相辉映，美不胜收。镇上的米豆腐很有特色，值得一试。建议避开节假日，游客会少很多。</p>
                  <div class="flex items-center text-sm text-gray-500 mb-3">
                    <span class="flex items-center mr-4">
                      <i class="fa fa-thumbs-up text-primary mr-1"></i> 36
                    </span>
                    <span class="flex items-center mr-4">
                      <i class="fa fa-comment-o mr-1"></i> 6 条回复
                    </span>
                  </div>
                  <div class="flex space-x-2 justify-end">
                    <button class="text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded transition-colors edit-comment-btn" data-id="3" data-rating="4" data-content="挂在瀑布上的千年古镇，非常有特色。晚上灯光亮起时，瀑布和古镇交相辉映，美不胜收。镇上的米豆腐很有特色，值得一试。建议避开节假日，游客会少很多。">
                      <i class="fa fa-edit mr-1"></i> 编辑
                    </button>
                    <button class="text-xs px-3 py-1 bg-red-100 hover:bg-red-200 text-red-600 rounded transition-colors delete-comment-btn" data-id="3">
                      <i class="fa fa-trash mr-1"></i> 删除
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <button id="addCommentBtn" class="mt-6 bg-white border border-primary text-primary hover:bg-primary hover:text-white transition-colors duration-300 px-4 py-2 rounded-lg text-sm font-medium">
              <i class="fa fa-plus mr-1"></i> 发表新评论
            </button>
          </div>
        </section>

        <!-- 我的攻略笔记 -->
        <section class="bg-white rounded-xl shadow-lg overflow-hidden">
          <div class="border-b border-gray-100 px-6 py-4 flex justify-between items-center">
            <h3 class="text-xl font-bold flex items-center">
              <i class="fa fa-book text-secondary mr-2"></i> 我的攻略笔记
            </h3>
            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium transition-colors">
              查看全部 <i class="fa fa-angle-right ml-1"></i>
            </a>
          </div>

          <div class="p-6">
            <div class="space-y-6">
              <!-- 攻略1 -->
              <div class="border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                <div class="md:flex">
                  <div class="md:w-1/3">
                    <div class="h-48 md:h-full">
                      <img src="https://picsum.photos/id/1037/600/400" alt="凤凰古城三日游攻略" class="w-full h-full object-cover">
                    </div>
                  </div>
                  <div class="md:w-2/3 p-5">
                    <div class="flex justify-between items-start mb-2">
                      <h4 class="font-bold text-lg">凤凰古城三日深度游攻略</h4>
                      <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded">热门</span>
                    </div>
                    <div class="flex items-center text-sm text-gray-500 mb-3">
                      <span class="flex items-center mr-4">
                        <i class="fa fa-map-marker text-primary mr-1"></i> 凤凰古城
                      </span>
                      <span class="flex items-center mr-4">
                        <i class="fa fa-calendar text-primary mr-1"></i> 发布于 2023-09-18
                      </span>
                      <span class="flex items-center">
                        <i class="fa fa-eye text-primary mr-1"></i> 2.3k 阅读
                      </span>
                    </div>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                      这篇攻略将带您深入了解凤凰古城的必游景点、特色美食和住宿推荐。从古城墙到沈从文故居，从沱江泛舟到篝火晚会，让您的凤凰之旅不留遗憾...
                    </p>
                    <div class="flex items-center justify-between">
                      <div class="flex items-center space-x-4 text-sm">
                        <span class="flex items-center text-gray-500">
                          <i class="fa fa-thumbs-up text-primary mr-1"></i> 156
                        </span>
                        <span class="flex items-center text-gray-500">
                          <i class="fa fa-comment-o mr-1"></i> 32
                        </span>
                        <span class="flex items-center text-gray-500">
                          <i class="fa fa-bookmark-o mr-1"></i> 89
                        </span>
                      </div>
                      <div class="flex space-x-2">
                        <button class="text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded transition-colors edit-note-btn" data-id="1" data-title="凤凰古城三日深度游攻略" data-location="fenghuang" data-content="这篇攻略将带您深入了解凤凰古城的必游景点、特色美食和住宿推荐。从古城墙到沈从文故居，从沱江泛舟到篝火晚会，让您的凤凰之旅不留遗憾...">
                          <i class="fa fa-edit mr-1"></i> 编辑
                        </button>
                        <button class="text-xs px-3 py-1 bg-red-100 hover:bg-red-200 text-red-600 rounded transition-colors delete-note-btn" data-id="1">
                          <i class="fa fa-trash mr-1"></i> 删除
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 攻略2 -->
              <div class="border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                <div class="md:flex">
                  <div class="md:w-1/3">
                    <div class="h-48 md:h-full">
                      <img src="https://picsum.photos/id/1038/600/400" alt="张家界徒步攻略" class="w-full h-full object-cover">
                    </div>
                  </div>
                  <div class="md:w-2/3 p-5">
                    <div class="flex justify-between items-start mb-2">
                      <h4 class="font-bold text-lg">张家界精华徒步路线指南</h4>
                      <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">实用</span>
                    </div>
                    <div class="flex items-center text-sm text-gray-500 mb-3">
                      <span class="flex items-center mr-4">
                        <i class="fa fa-map-marker text-primary mr-1"></i> 张家界国家森林公园
                      </span>
                      <span class="flex items-center mr-4">
                        <i class="fa fa-calendar text-primary mr-1"></i> 发布于 2023-08-25
                      </span>
                      <span class="flex items-center">
                        <i class="fa fa-eye text-primary mr-1"></i> 1.8k 阅读
                      </span>
                    </div>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                      为徒步爱好者整理的张家界精华路线，包含袁家界、杨家界、天子山等区域的最佳徒步路径，详细说明各路段难度、所需时间和风景亮点...
                    </p>
                    <div class="flex items-center justify-between">
                      <div class="flex items-center space-x-4 text-sm">
                        <span class="flex items-center text-gray-500">
                          <i class="fa fa-thumbs-up text-primary mr-1"></i> 124
                        </span>
                        <span class="flex items-center text-gray-500">
                          <i class="fa fa-comment-o mr-1"></i> 27
                        </span>
                        <span class="flex items-center text-gray-500">
                          <i class="fa fa-bookmark-o mr-1"></i> 76
                        </span>
                      </div>
                      <div class="flex space-x-2">
                        <button class="text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded transition-colors edit-note-btn" data-id="2" data-title="张家界精华徒步路线指南" data-location="zhangjiajie" data-content="为徒步爱好者整理的张家界精华路线，包含袁家界、杨家界、天子山等区域的最佳徒步路径，详细说明各路段难度、所需时间和风景亮点...">
                          <i class="fa fa-edit mr-1"></i> 编辑
                        </button>
                        <button class="text-xs px-3 py-1 bg-red-100 hover:bg-red-200 text-red-600 rounded transition-colors delete-note-btn" data-id="2">
                          <i class="fa fa-trash mr-1"></i> 删除
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 攻略3 -->
              <div class="border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                <div class="md:flex">
                  <div class="md:w-1/3">
                    <div class="h-48 md:h-full">
                      <img src="https://picsum.photos/id/1080/600/400" alt="湘西美食攻略" class="w-full h-full object-cover">
                    </div>
                  </div>
                  <div class="md:w-2/3 p-5">
                    <div class="flex justify-between items-start mb-2">
                      <h4 class="font-bold text-lg">湘西特色美食全攻略</h4>
                      <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">美食</span>
                    </div>
                    <div class="flex items-center text-sm text-gray-500 mb-3">
                      <span class="flex items-center mr-4">
                        <i class="fa fa-map-marker text-primary mr-1"></i> 湘西各地
                      </span>
                      <span class="flex items-center mr-4">
                        <i class="fa fa-calendar text-primary mr-1"></i> 发布于 2023-07-10
                      </span>
                      <span class="flex items-center">
                        <i class="fa fa-eye text-primary mr-1"></i> 3.1k 阅读
                      </span>
                    </div>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                      从凤凰古城的血粑鸭到张家界的三下锅，从芙蓉镇的米豆腐到吉首的酸肉，这篇攻略详细介绍了湘西各地的特色美食和值得推荐的餐馆...
                    </p>
                    <div class="flex items-center justify-between">
                      <div class="flex items-center space-x-4 text-sm">
                        <span class="flex items-center text-gray-500">
                          <i class="fa fa-thumbs-up text-primary mr-1"></i> 215
                        </span>
                        <span class="flex items-center text-gray-500">
                          <i class="fa fa-comment-o mr-1"></i> 43
                        </span>
                        <span class="flex items-center text-gray-500">
                          <i class="fa fa-bookmark-o mr-1"></i> 128
                        </span>
                      </div>
                      <div class="flex space-x-2">
                        <button class="text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded transition-colors edit-note-btn" data-id="3" data-title="湘西特色美食全攻略" data-location="" data-content="从凤凰古城的血粑鸭到张家界的三下锅，从芙蓉镇的米豆腐到吉首的酸肉，这篇攻略详细介绍了湘西各地的特色美食和值得推荐的餐馆...">
                          <i class="fa fa-edit mr-1"></i> 编辑
                        </button>
                        <button class="text-xs px-3 py-1 bg-red-100 hover:bg-red-200 text-red-600 rounded transition-colors delete-note-btn" data-id="3">
                          <i class="fa fa-trash mr-1"></i> 删除
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <button id="createNoteBtn" class="mt-6 bg-white border border-primary text-primary hover:bg-primary hover:text-white transition-colors duration-300 px-4 py-2 rounded-lg text-sm font-medium">
              <i class="fa fa-plus mr-1"></i> 发布新攻略
            </button>
          </div>
        </section>

        <!-- 旅游统计 -->
        <section class="bg-white rounded-xl shadow-lg overflow-hidden">
          <div class="border-b border-gray-100 px-6 py-4">
            <h3 class="text-xl font-bold flex items-center">
              <i class="fa fa-bar-chart text-primary mr-2"></i> 我的旅游统计
            </h3>
          </div>

          <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <!-- 景点类型统计 -->
              <div>
                <h4 class="text-sm font-medium text-gray-500 mb-3">游览景点类型分布</h4>
                <div class="h-64">
                  <canvas id="categoryChart"></canvas>
                </div>
              </div>

              <!-- 月度游览统计 -->
              <div>
                <h4 class="text-sm font-medium text-gray-500 mb-3">近6个月游览次数</h4>
                <div class="h-64">
                  <canvas id="monthlyChart"></canvas>
                </div>
              </div>
            </div>

            <!-- 统计数据卡片 -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
              <div class="bg-gray-50 rounded-lg p-4 border border-gray-100">
                <div class="text-gray-500 text-xs mb-1">总游览天数</div>
                <div class="text-2xl font-bold text-primary">24</div>
                <div class="text-green-500 text-xs mt-1 flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 较去年增长 32%
                </div>
              </div>

              <div class="bg-gray-50 rounded-lg p-4 border border-gray-100">
                <div class="text-gray-500 text-xs mb-1">游览县市</div>
                <div class="text-2xl font-bold text-primary">5</div>
                <div class="text-green-500 text-xs mt-1 flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 新增 2 个县市
                </div>
              </div>

              <div class="bg-gray-50 rounded-lg p-4 border border-gray-100">
                <div class="text-gray-500 text-xs mb-1">拍摄照片</div>
                <div class="text-2xl font-bold text-primary">156</div>
                <div class="text-gray-500 text-xs mt-1 flex items-center">
                  <i class="fa fa-image mr-1"></i> 已上传 89 张
                </div>
              </div>

              <div class="bg-gray-50 rounded-lg p-4 border border-gray-100">
                <div class="text-gray-500 text-xs mb-1">获得点赞</div>
                <div class="text-2xl font-bold text-primary">238</div>
                <div class="text-green-500 text-xs mt-1 flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 本周新增 36 个
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 推荐景点 -->
        <section class="bg-white rounded-xl shadow-lg overflow-hidden">
          <div class="border-b border-gray-100 px-6 py-4 flex justify-between items-center">
            <h3 class="text-xl font-bold flex items-center">
              <i class="fa fa-lightbulb-o text-accent mr-2"></i> 为您推荐
            </h3>
            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium transition-colors">
              更多推荐 <i class="fa fa-angle-right ml-1"></i>
            </a>
          </div>

          <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <!-- 推荐项1 -->
              <div class="flex border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                <div class="w-1/3">
                  <img src="https://picsum.photos/id/1018/300/300" alt="天门山国家森林公园" class="w-full h-full object-cover">
                </div>
                <div class="w-2/3 p-3">
                  <h4 class="font-medium text-sm">天门山国家森林公园</h4>
                  <div class="flex items-center text-yellow-400 text-xs mt-1 mb-2">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-half-o"></i>
                    <span class="text-gray-500 ml-1">4.7 (3.2k评价)</span>
                  </div>
                  <p class="text-xs text-gray-600 mb-2">距您当前位置约85公里 · 张家界市永定区</p>
                  <div class="flex justify-between items-center">
                    <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded">根据您的喜好推荐</span>
                    <button class="text-primary text-xs hover:text-primary/80 transition-colors add-favorite-btn" data-id="4">
                      <i class="fa fa-bookmark-o mr-1"></i> 收藏
                    </button>
                  </div>
                </div>
              </div>

              <!-- 推荐项2 -->
              <div class="flex border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                <div class="w-1/3">
                  <img src="https://picsum.photos/id/1039/300/300" alt="德夯苗寨" class="w-full h-full object-cover">
                </div>
                <div class="w-2/3 p-3">
                  <h4 class="font-medium text-sm">德夯苗寨</h4>
                  <div class="flex items-center text-yellow-400 text-xs mt-1 mb-2">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-o"></i>
                    <span class="text-gray-500 ml-1">4.3 (1.5k评价)</span>
                  </div>
                  <p class="text-xs text-gray-600 mb-2">距您当前位置约28公里 · 吉首市德夯大峡谷</p>
                  <div class="flex justify-between items-center">
                    <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded">即将举办苗年活动</span>
                    <button class="text-primary text-xs hover:text-primary/80 transition-colors add-favorite-btn" data-id="5">
                      <i class="fa fa-bookmark-o mr-1"></i> 收藏
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-primary text-white mt-16 border-pattern">
    <div class="container mx-auto px-4 py-10">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h3 class="text-xl font-display mb-4">湘西之旅</h3>
          <p class="text-gray-300 text-sm">探索湘西秘境，感受土家族、苗族文化魅力，发现不一样的湖南西部风情。</p>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-gray-300 hover:text-accent transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="text-gray-300 hover:text-accent transition-colors">
              <i class="fa fa-wechat"></i>
            </a>
            <a href="#" class="text-gray-300 hover:text-accent transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
            <a href="#" class="text-gray-300 hover:text-accent transition-colors">
              <i class="fa fa-youtube-play"></i>
            </a>
          </div>
        </div>

        <div>
          <h4 class="text-lg font-medium mb-4">快速链接</h4>
          <ul class="space-y-2 text-sm text-gray-300">
            <li><a href="#" class="hover:text-accent transition-colors">首页</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">景点大全</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">旅游攻略</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">美食推荐</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">民俗文化</a></li>
          </ul>
        </div>

        <div>
          <h4 class="text-lg font-medium mb-4">热门目的地</h4>
          <ul class="space-y-2 text-sm text-gray-300">
            <li><a href="#" class="hover:text-accent transition-colors">凤凰古城</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">张家界</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">芙蓉镇</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">德夯苗寨</a></li>
            <li><a href="#" class="hover:text-accent transition-colors">里耶古城</a></li>
          </ul>
        </div>

        <div>
          <h4 class="text-lg font-medium mb-4">联系我们</h4>
          <ul class="space-y-2 text-sm text-gray-300">
            <li class="flex items-start">
              <i class="fa fa-map-marker mt-1 mr-2"></i>
              <span>湖南省湘西土家族苗族自治州吉首市</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-phone mr-2"></i>
              <span>400-123-4567</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-envelope mr-2"></i>
              <span>info@xiangxitrip.com</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-400">
        <p>© 2023 湘西之旅 版权所有 | 湘ICP备12345678号</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 初始化图表
    document.addEventListener('DOMContentLoaded', function() {
      // 景点类型统计图表
      const categoryCtx = document.getElementById('categoryChart').getContext('2d');
      new Chart(categoryCtx, {
        type: 'doughnut',
        data: {
          labels: ['古镇', '自然风光', '民俗村寨', '历史遗迹', '美食街区'],
          datasets: [{
            data: [35, 40, 15, 5, 5],
            backgroundColor: [
              '#1A4D2E', // 主色调
              '#4A7C51',
              '#E63946', // 强调色
              '#FFB703', // 金色
              '#1D3557'  // 深色
            ],
            borderWidth: 0
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom',
              labels: {
                boxWidth: 12,
                padding: 15,
                font: {
                  size: 11
                }
              }
            }
          },
          cutout: '65%'
        }
      });

      // 月度游览统计图表
      const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
      new Chart(monthlyCtx, {
        type: 'line',
        data: {
          labels: ['5月', '6月', '7月', '8月', '9月', '10月'],
          datasets: [{
            label: '游览次数',
            data: [2, 3, 5, 4, 3, 6],
            borderColor: '#1A4D2E',
            backgroundColor: 'rgba(26, 77, 46, 0.1)',
            tension: 0.4,
            fill: true,
            pointBackgroundColor: '#E63946',
            pointRadius: 4,
            pointHoverRadius: 6
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              ticks: {
                stepSize: 2
              },
              grid: {
                color: 'rgba(0, 0, 0, 0.05)'
              }
            },
            x: {
              grid: {
                display: false
              }
            }
          }
        }
      });
    });

    // 添加卡片悬停动画效果
    const cards = document.querySelectorAll('.shadow-lg');
    cards.forEach(card => {
      card.addEventListener('mouseenter', function() {
        this.classList.add('transform', 'translate-y-[-5px]', 'transition-all', 'duration-300');
      });
      card.addEventListener('mouseleave', function() {
        this.classList.remove('transform', 'translate-y-[-5px]');
      });
    });

    // 编辑个人资料弹窗功能
    const editProfileBtn = document.getElementById('editProfileBtn');
    const editProfileModal = document.getElementById('editProfileModal');
    const modalContent = document.getElementById('modalContent');
    const closeModal = document.getElementById('closeModal');
    const cancelEdit = document.getElementById('cancelEdit');
    const profileForm = document.getElementById('profileForm');
    const successToast = document.getElementById('successToast');
    const toastMessage = document.getElementById('toastMessage');

    // 打开弹窗
    editProfileBtn.addEventListener('click', function() {
      editProfileModal.classList.remove('hidden');
      // 触发动画
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
    });

    // 关闭弹窗
    function closeModalFunc() {
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        editProfileModal.classList.add('hidden');
      }, 300);
    }

    closeModal.addEventListener('click', closeModalFunc);
    cancelEdit.addEventListener('click', closeModalFunc);

    // 点击弹窗外部关闭
    editProfileModal.addEventListener('click', function(e) {
      if (e.target === editProfileModal) {
        closeModalFunc();
      }
    });

    // 表单提交
    profileForm.addEventListener('submit', function(e) {
      e.preventDefault();
      closeModalFunc();
      showToast('个人资料更新成功');
    });

    // 显示提示消息
    function showToast(message) {
      toastMessage.textContent = message;
      successToast.classList.remove('translate-y-20', 'opacity-0');
      successToast.classList.add('translate-y-0', 'opacity-100');

      setTimeout(() => {
        successToast.classList.remove('translate-y-0', 'opacity-100');
        successToast.classList.add('translate-y-20', 'opacity-0');
      }, 3000);
    }

    // 评论相关功能
    const editCommentBtns = document.querySelectorAll('.edit-comment-btn');
    const deleteCommentBtns = document.querySelectorAll('.delete-comment-btn');
    const addCommentBtn = document.getElementById('addCommentBtn');
    const editCommentModal = document.getElementById('editCommentModal');
    const commentModalContent = document.getElementById('commentModalContent');
    const closeCommentModal = document.getElementById('closeCommentModal');
    const cancelComment = document.getElementById('cancelComment');
    const commentForm = document.getElementById('commentForm');
    const commentId = document.getElementById('commentId');
    const commentContent = document.getElementById('commentContent');
    const ratingStars = document.getElementById('ratingStars');
    let currentRating = 0;

    // 打开评论编辑弹窗
    function openCommentModal(isEdit = false, data = {}) {
      editCommentModal.classList.remove('hidden');

      if (isEdit) {
        commentId.value = data.id;
        commentContent.value = data.content;
        currentRating = parseInt(data.rating);
        updateRatingStars();
      } else {
        commentId.value = '';
        commentContent.value = '';
        currentRating = 0;
        updateRatingStars();
      }

      // 触发动画
      setTimeout(() => {
        commentModalContent.classList.remove('scale-95', 'opacity-0');
        commentModalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
    }

    // 关闭评论弹窗
    function closeCommentModalFunc() {
      commentModalContent.classList.remove('scale-100', 'opacity-100');
      commentModalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        editCommentModal.classList.add('hidden');
      }, 300);
    }

    // 编辑评论
    editCommentBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const data = {
          id: this.getAttribute('data-id'),
          rating: this.getAttribute('data-rating'),
          content: this.getAttribute('data-content')
        };
        openCommentModal(true, data);
      });
    });

    // 添加新评论
    addCommentBtn.addEventListener('click', function() {
      openCommentModal(false);
    });

    // 关闭评论弹窗事件
    closeCommentModal.addEventListener('click', closeCommentModalFunc);
    cancelComment.addEventListener('click', closeCommentModalFunc);

    // 点击评论弹窗外部关闭
    editCommentModal.addEventListener('click', function(e) {
      if (e.target === editCommentModal) {
        closeCommentModalFunc();
      }
    });

    // 评分星星功能
    ratingStars.querySelectorAll('i').forEach(star => {
      star.addEventListener('click', function() {
        currentRating = parseInt(this.getAttribute('data-rating'));
        updateRatingStars();
      });

      star.addEventListener('mouseover', function() {
        const tempRating = parseInt(this.getAttribute('data-rating'));
        updateRatingStars(tempRating);
      });

      star.addEventListener('mouseout', function() {
        updateRatingStars();
      });
    });

    // 更新评分星星显示
    function updateRatingStars(tempRating = null) {
      const rating = tempRating !== null ? tempRating : currentRating;
      const stars = ratingStars.querySelectorAll('i');

      stars.forEach(star => {
        const starRating = parseInt(star.getAttribute('data-rating'));
        if (starRating <= rating) {
          star.classList.add('text-accent');
          star.classList.remove('text-gray-300');
        } else {
          star.classList.remove('text-accent');
          star.classList.add('text-gray-300');
        }
      });
    }

    // 提交评论表单
    commentForm.addEventListener('submit', function(e) {
      e.preventDefault();

      if (currentRating === 0) {
        alert('请给出评分');
        return;
      }

      if (!commentContent.value.trim()) {
        alert('请输入评论内容');
        return;
      }

      closeCommentModalFunc();
      const message = commentId.value ? '评论更新成功' : '评论发布成功';
      showToast(message);
    });

    // 删除评论
    deleteCommentBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const commentId = this.getAttribute('data-id');
        if (confirm('确定要删除这条评论吗？')) {
          // 实际应用中这里会发送删除请求到服务器
          this.closest('.border-b, div:not(.border-b)').remove();
          showToast('评论已删除');
        }
      });
    });

    // 攻略笔记相关功能
    const editNoteBtns = document.querySelectorAll('.edit-note-btn');
    const deleteNoteBtns = document.querySelectorAll('.delete-note-btn');
    const createNoteBtn = document.getElementById('createNoteBtn');
    const editNoteModal = document.getElementById('editNoteModal');
    const noteModalContent = document.getElementById('noteModalContent');
    const noteModalTitle = document.getElementById('noteModalTitle');
    const closeNoteModal = document.getElementById('closeNoteModal');
    const cancelNote = document.getElementById('cancelNote');
    const noteForm = document.getElementById('noteForm');
    const noteId = document.getElementById('noteId');
    const noteTitle = document.getElementById('noteTitle');
    const noteLocation = document.getElementById('noteLocation');
    const noteContent = document.getElementById('noteContent');

    // 打开攻略编辑弹窗
    function openNoteModal(isEdit = false, data = {}) {
      editNoteModal.classList.remove('hidden');

      if (isEdit) {
        noteModalTitle.textContent = '编辑攻略笔记';
        noteId.value = data.id;
        noteTitle.value = data.title;
        noteLocation.value = data.location;
        noteContent.value = data.content;
      } else {
        noteModalTitle.textContent = '发布攻略笔记';
        noteId.value = '';
        noteTitle.value = '';
        noteLocation.value = '';
        noteContent.value = '';
      }

      // 触发动画
      setTimeout(() => {
        noteModalContent.classList.remove('scale-95', 'opacity-0');
        noteModalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
    }

    // 关闭攻略弹窗
    function closeNoteModalFunc() {
      noteModalContent.classList.remove('scale-100', 'opacity-100');
      noteModalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        editNoteModal.classList.add('hidden');
      }, 300);
    }

    // 编辑攻略
    editNoteBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const data = {
          id: this.getAttribute('data-id'),
          title: this.getAttribute('data-title'),
          location: this.getAttribute('data-location'),
          content: this.getAttribute('data-content')
        };
        openNoteModal(true, data);
      });
    });

    // 创建新攻略
    createNoteBtn.addEventListener('click', function() {
      openNoteModal(false);
    });

    // 关闭攻略弹窗事件
    closeNoteModal.addEventListener('click', closeNoteModalFunc);
    cancelNote.addEventListener('click', closeNoteModalFunc);

    // 点击攻略弹窗外部关闭
    editNoteModal.addEventListener('click', function(e) {
      if (e.target === editNoteModal) {
        closeNoteModalFunc();
      }
    });

    // 提交攻略表单
    noteForm.addEventListener('submit', function(e) {
      e.preventDefault();

      if (!noteTitle.value.trim()) {
        alert('请输入攻略标题');
        return;
      }

      if (!noteContent.value.trim()) {
        alert('请输入攻略内容');
        return;
      }

      closeNoteModalFunc();
      const message = noteId.value ? '攻略更新成功' : '攻略发布成功';
      showToast(message);
    });

    // 删除攻略
    deleteNoteBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const noteId = this.getAttribute('data-id');
        if (confirm('确定要删除这篇攻略吗？')) {
          // 实际应用中这里会发送删除请求到服务器
          this.closest('.border').remove();
          showToast('攻略已删除');
        }
      });
    });

    // 收藏按钮功能
    const addFavoriteBtns = document.querySelectorAll('.add-favorite-btn');
    addFavoriteBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        if (icon.classList.contains('fa-bookmark-o')) {
          icon.classList.remove('fa-bookmark-o');
          icon.classList.add('fa-bookmark');
          this.classList.add('text-secondary');
          showToast('收藏成功');
        } else {
          icon.classList.remove('fa-bookmark');
          icon.classList.add('fa-bookmark-o');
          this.classList.remove('text-secondary');
          showToast('已取消收藏');
        }
      });
    });
  </script>
</body>
</html></html>
